<template>
	<u-popup :mask-close-able="false" :custom-style="customStyle" border-radius="14" v-model="computedShow"
		mode="bottom" height="80%">
		<view class="title">
			<text>{{toolConfig.title}}</text>
		</view>
		<scroll-view scroll-y="true" :scroll-with-animation="true" class="scroll-Y">
			<u-card :show-head="false" v-for="(item,index) in list">
				<view slot="body">
					<view class="action" v-if="toolConfig.type=='edit'">
						<u-button v-if="list.length!=1" type="error" size="mini" :plain="true"
							@click="deleteTool(index)">删除</u-button>
						<u-button v-if="index==list.length-1" type="primary " size="mini" :plain="true"
							@click="add">新增</u-button>
					</view>
					<u-field :disabled="toolConfig.type=='view'" v-model="item.type" label="类型:"
						placeholder="请填写"></u-field>
					<u-field :disabled="toolConfig.type=='view'" v-model="item.name" label="名称:"
						placeholder="请填写"></u-field>
					<!-- <u-field :disabled="true" v-model="item.orderNumber" label="专业:" placeholder="请填写"></u-field> -->
					<u-field :disabled="toolConfig.type=='view'" v-model="item.specifications" label="规格型号:"
						placeholder="请填写"></u-field>
					<u-field :disabled="toolConfig.type=='view'" v-model="item.unit" label="单位:"
						placeholder="请填写"></u-field>
					<u-cell-item title="需求数量" arrow-direction="down" :arrow="false">
						<view slot="right-icon"><u-number-box :disabled="toolConfig.type=='view'"
								v-model="item.demandNumber"></u-number-box></view>
					</u-cell-item>
				</view>
			</u-card>
		</scroll-view>
		<view class="footer">
			<u-button :plain="true" type="primary" size="medium" :ripple="true"
				@click="computedShow=false">关闭</u-button>
			<u-button v-if="toolConfig.type=='edit'" size="medium" :ripple="true" type="primary"
				@click="confirm">保存</u-button>
		</view>
	</u-popup>
</template>

<script>
	export default {

		props: {
			show: {
				type: Boolean,
				default: false
			},
			toolConfig: {
				type: Object
			}
		},
		computed: {
			computedShow: {
				get() {
					return this.show
				},
				set(val) {
					this.$emit("update:show", val)
				},
			}
		},
		watch: {
			"toolConfig.data": {
				handler(val) {
					if (val.length) {
						this.list = val.map((item, idx) => {
							return {
								...item,
								index: idx
							}
						})

					} else {

					}
				},
				deep: true,
				immediate: true
			}
		},
		data() {
			return {
				customStyle: {
					display: "flex",
					flexDirection: "column"
				},
				list: [{
					index: 0,
					type: "",
					name: "",
					specifications: "",
					unit: "",
					demandNumber: 0,
				}]
			}
		},
		methods: {
			confirm() {
				uni.showToast({
					title: "工器具保存成功",
					icon: "none",
				});
				this.$emit('passToolsData', this.list)
			},
			add() {
				let index = this.list.length
				this.list.push({
					index: index,
					type: "",
					name: "",
					specifications: "",
					unit: "",
					demandNumber: 0,
				})
			},

			deleteTool(index) {
				this.list.splice(index, 1)
				this.list = this.lis.map((item, idx) => {
					return {
						...item,
						index: idx + 1
					}
				})
			}
		},
		destroyed() {
			console.log('销毁了')
		}
	}
</script>

<style scoped lang="less">
	/deep/.u-cell_title {
		padding-left: 0px!important;
	}

	.footer {
		display: flex;
		flex-direction: row;
		justify-content: flex-end;

		.u-btn {
			width: 100rpx;
			margin-left: 20px;
		}

		padding: 10px 20px;
	}

	.scroll-Y {
		height: calc(80vh - 100px);
	}

	.title {
		padding: 10px;
		font-weight: 600;
	}

	.action {
		text-align: right;

		.u-btn {
			width: 50px;
		}

		:nth-child(2) {
			margin-left: 10px;
		}
	}
</style>